<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作文件</title>
</head>
<body>
	<!--
		上传文件注意事项
		1:post方式上传
		2:enctype = multipart/form-data
		3:input:type = file
	-->
	<form id="test-file" action="#" target="_blank" method="post" enctype="multipart/form-data" onsubmit="return checkFile()">
		<input id="file" name="file" type="file">
		<button type="submit">上传</button>
	</form>

	<!--
		HTML允许我们通过File和FileReader来读取文件中更多的信息
	-->
<script>

	function checkFile() {
		let fileName = document.getElementById("file").value;
		console.log("fileName:" + fileName);
		if (!fileName || !(fileName.endsWith(".jpg") || fileName.endsWith(".png") || fileName.endsWith(".gif"))) {
			alert("can only upload image file");
			return false;
		}
		return true;
	}
</script>
</body>
</html>